<!--
 * @Author: 敬华丰 2637844016@qq.com
 * @Date: 2023-04-25 10:39:09
 * @LastEditors: 敬华丰 2637844016@qq.com
 * @LastEditTime: 2023-05-05 09:30:11
 * @FilePath: \imedia_crm-branch_v5.0.1_0518\src\allocation\resourceManage\vehicle-info\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <c-list-template title="品牌配置" :operation="true">
        <template slot="search">
            <el-row :gutter="5">
                <el-col :span="6" class="flex-center">
                    <div class="mr-lg">品牌名称：</div>
                    <el-input placeholder="输入辆品牌" v-model="querys.brand" class="wh flex-1 mr-lg" />
                </el-col>
                <el-col :span="18" class="flex-x-end">
                    <el-button icon="el-icon-search" type="primary" @click="handleSelect">搜索</el-button>
                    <el-button icon="el-icon-delete" @click="handleReset">重置</el-button>
                </el-col>
            </el-row>
        </template>
        <template slot="operation">
            <div class="flex-y-center">
                <el-button icon="el-icon-plus" type="primary" @click="handleAdd">新增品牌</el-button>
            </div>
        </template>
        <template slot="list">
            <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="tableData" v-loading="loading">
                <el-table-column label="序号" align="center" width="80" type="index" />
                <el-table-column label="车辆品牌" align="center" prop="brand" />
                <el-table-column label="品牌Logo" align="center" prop="series">
                    <template slot-scope="scope">
                        <el-image class="logo" :src="scope.row.icon" fit="fill" style="width:60px"></el-image>
                    </template>
                </el-table-column>
                <el-table-column width="150" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-link class="mr-lg" @click="handleDetails(scope.row)" type="primary" :underline="false">编辑</el-link>
                        <el-link @click="handleDel(scope.row)" type="danger" :underline="false">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template slot="pagination">
            <el-pagination background :current-page="querys.current" :page-sizes="[10, 20, 50, 100]" :page-size="querys.size" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </template>
        <c-brand-form ref="cBrandForm" />
    </c-list-template>
</template>
<script>
import cBrandForm from "./components/c-brand-form.vue";
export default {
    components: {
        cBrandForm,
    },
    data () {
        return {
            total: 0,
            tableData: [],
            querys: {
                current: 1,
                size: 10,
            },
            time: [],
            loading: false,
        };
    },
    mounted () {
        this.tableList();
    },
    methods: {

        handleDel (item) {
            this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                const url = "/CarBrand/delete";
                this.$post({ url, params: { id: item.id } }).then((res) => {
                    this.$message.success("删除成功");
                    this.tableList();
                });
            });
        },
        handleDetails (item) {
            this.$refs.cBrandForm.handleOpen(item);
        },
        handleAdd () {
            this.$refs.cBrandForm.handleOpen();
        },
        tableList () {
            this.loading = true;
            const params = JSON.parse(JSON.stringify(this.querys));
            if (this.time.length > 0) {
                params.startTime = this.time[0];
                params.endTime = this.time[1];
            }
            const url = "/CarBrand/page";
            this.$get({ url, params }).then((res) => {
                this.tableData = res.records;
                this.total = res.total * 1;
                this.loading = false;
            });
        },
        handleReset () {
            this.querys = {
                current: 1,
                size: 10,
            };
            this.time = [];
            this.tableList();
        },
        handleSelect () {
            this.querys.current = 1;
            this.tableList();
        },
        handleSizeChange (val) {
            this.querys.size = val;
            this.tableList();
        },
        handleCurrentChange (val) {
            this.querys.current = val;
            this.tableList();
        },
    },
};
</script>
